<template>
  <div>
     <el-table :data="props.tableData">
        <el-table-column :type="item.type?item.type:''"   v-for="item in columnData" :prop="item.prop" :label="item.label"
        :width="item.width" :key="item.key">
        <!-- 设计的作用域插槽 自定义内容 -->
        <template v-if="item.key" #default="{row}">
            <slot   :name="item.key" :row="row"></slot>
        </template>
        
      </el-table-column>
        
     </el-table>
      <Pagination :total="props.total" v-model:page="queryData.pageNum" v-model:limit="queryData.pageSize" @pagination="toGetList"></Pagination>
  </div>
</template>
<script setup>
import {defineProps,reactive,defineEmits} from 'vue'
let emits = defineEmits(['sendPage'])
// 收集好的页码传给父组件
let queryData = reactive({
    pageNum: 1,
    pageSize: 3
  })

let toGetList = ()=>{
    emits('sendPage',queryData)
}
let props = defineProps({
  
  total:{
    type:Number,
    default:0
  },
  tableData:{ //表格的数据
    type:Array,
    default:()=>[]
  },
  columnData:{ // 表头的数据
    type:Array,
    default:()=>[]
  },
  tableStyle:{ //表格的样式
    type:Object,
    default:()=>{}
  }
})
  // 封装table组件
  // 一，设计的父传子 
  //   1.表头的数据
  //   2.表格的数据
  //   3.表格的样式
  
</script>